<template>
  <ul class="cinlist">
    <li class="cinitem" v-for="(l, i) in list" :key="i">
      <router-link
        :to="{
          name: 'cinema-detail',
          params: {
            cinemaId: l.cinemaId,
            filmId: filmId,
            time: time,
          },
        }"
      >
        <div class="cincol">
          <p class="name">
            {{ l.name }}
          </p>
          <p class="price">¥ {{ l.lowPrice / 100 }} 起</p>
        </div>
        <div class="cincol">
          <p class="address">
            {{ l.address }}
          </p>
          <p class="distance">
            <span v-if="l.Distance">{{ l.Distance | tofix }} km</span>
            <span v-else>距离未知</span>
          </p>
        </div>
      </router-link>
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    list: Array,
    filmId: Number,
    time: Number,
  },
};
</script>

<style lang="scss" scoped>
.cinlist {
  .cinitem {
    position: relative;
    background-color: #fff;
    padding: 15px;
    width: 100%;
    border-top: 1px solid #eee;
    .cincol {
      display: flex;
      justify-content: space-between;
      margin-top: 6px;
      align-items: center;
      .name {
        color: #191a1b;
        font-size: 15px;
        max-width: 80%;
        overflow: hidden;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .price {
        color: #ff5f16;
        font-size: 10px;
      }
      .address {
        color: #797d82;
        font-size: 12px;
        display: block;
        max-width: 80%;
        overflow: hidden;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .distance {
        font-size: 11px;
        color: #797d82;
      }
    }
  }
}
</style>
